<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
           <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
 
    <script src="./zuoye.js"></script>

</head>
<style>
    th{
        text-align: center;
    }
    td{
        text-align: center;
    }
</style>
<body>
    <h1>学生成绩管理</h1>
    <div class="dropup">
    <select name="" id="class">
        <option>请选择班级</option>
    </select>
    <select name="" id="duan">
        <option>请选择几段</option>
    </select>
</div>
<table class="table table-bordered">
    <thead>
    <tr>
        <th>姓名</th>
        <th>第一周</th>
        <th colspan="3">第二周</th>
        <th>第三周</th>
        <th colspan="3">第四周</th>
        <th rowspan="1">月平均分数</th>
        <th rowspan="1">末位次数</th>
        <th rowspan="1">操作</th>
    </tr>
    <tr>
        <th></th>
        <th>机试分数</th>
        <th>笔试分数</th>
        <th>机试分数</th>
        <th>平均分数</th>
        <th>机试分数</th>
        <th>笔试分数</th>
        <th>机试分数</th>
        <th>平均分数</th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
</thead>
<tbody id="tbd">
  
</tbody>
<button id="btn">添加</button>
</table>
    <script>
  $(function(){
        var str = '<option>请选择班级</option>'
        for(let i in names){
            str+=`
            <option value="${i}">${names[i].name}</option>
            `
        }
        $("#class").html(str)

        $('#class').change(function(){
            let index = $(this).val()
            let cityArr = names[index].duan
            let str1 = `<option>请选择几段</option>`
            for(let i in cityArr){
                str1 += `
                <option value="${$(this).val()}-${i}">${cityArr[i].name}</option>
                `
            }
            $("#duan").html(str1)

        })
       


      $('#btn').click(function(){
        var td1obj = $('#td1').val()
         td2obj = $('#td2').val()
         td3obj = $('#td3').val()
         td4obj = $('#td4').val()
         td5obj = $('#td5').val()
         td6obj = $('#td6').val()
         td7obj = $('#td7').val()
         td8obj = $('#td8').val()
         td9obj = $('#td9').val()
         td10obj = $('#td10').val()
         td11obj = $('#td11').val()
         td12obj = $('#td12').val()

        var str2 = ''
        str2+=`
        <tr>
        <td id="td1">张三</td>
        <td id="td2">16</td>
        <td id="td3">43</td>
        <td id="td4">43</td>
        <td id="td5">43</td>
        <td id="td6">75</td>
        <td id="td7">75</td>
        <td id="td8">75</td>
        <td id="td9">75</td>
        <td id="td10" class="mouth">40</td>
        <td id="td11">45</td>
        <td id="td12"><button onclick=shanchu(this)>删除</button></td>
        </tr>
            `
               $("#tbd").append(str2)
 var a = 30
        if(a<=60){
            $('.mouth').css({background:'red'})
        }else{
            $('.mouth').css({background:'white'}) 
        }

        })
        
    })
    function shanchu(fn){
                var b = fn.parentNode.parentNode
            b.remove()
            }
    
    </script>
</body>
</html>